<template>
  <span style="text-align: center; font-size: 20px; font-weight: 600"
    >添加角色</span
  >
  <div>
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="权限编号">
        <el-input v-model="form.roleCoding" readonly="true" />
      </el-form-item>
      <el-form-item label="请选择权限">
        <el-select v-model="form.permissionId">
          <el-option label="请选择" :value="0" />
          <el-option
            v-for="item in ShowPermissionData"
            :key="item.permissionId"
            :label="item.permissionName"
            :value="item.permissionId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="请输入角色名称">
        <el-input v-model="form.roleName" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="AddRole">添加</el-button>
        <el-button @click="ent">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
import { ElMessage } from "element-plus";
const apiurls = import.meta.env.VITE_APP_API_URL_RBACShow;
const apiurla = import.meta.env.VITE_APP_API_URL_RBACAdd;

//权限添加的form
const form = reactive({
  roleId: 0,
  roleCoding: "",
  roleName: "",
  roleState: true,
  isDelete: false,
  rolePermId: 0,
  permissionId: 0,
  handle: "MaxAdmin",
  handleContext: "添加权限信息",
  handleTime: new Date(),
  pid: 1,
});
//取消
const ent = () => {
  form.roleName = "";
  form.roleCoding =
    new Date()
      .toString()
      .substring(7, 25)
      .replace(" ", "")
      .replace(" ", "")
      .replace(" ", "")
      .replace(":", "")
      .replace(":", "") + Math.floor(Math.random() * 100);
  form.roleCoding = form.roleCoding.replace(" ", "");
};
//添加角色
const AddRole = () => {
  if (form.roleName == "") {
    ElMessage.error("请输入角色名称");
    return;
  }
  axios.post(apiurla + "/api/RBAC/AddRoleData", form).then((res: any) => {
    console.log(res.data);
    ElMessage.success(res.data.msg);
  });
};
//绑定权限下拉
const ShowPermissionData: any = ref([]);
const ShowPermission = () => {
  const data = {};
  //https://localhost:7181/api/RBACs/ShowPermissionData
  axios
    .post(apiurls + "/api/RBACs/ShowPermissionData", data)
    .then((res: any) => {
      console.log(res.data);
      ShowPermissionData.value = res.data.data;
    });
};
//页面初始化
onMounted(() => {
  ShowPermission();
  form.roleCoding =
    new Date()
      .toString()
      .substring(7, 25)
      .replace(" ", "")
      .replace(" ", "")
      .replace(" ", "")
      .replace(":", "")
      .replace(":", "") + Math.floor(Math.random() * 100);
  form.roleCoding = form.roleCoding.replace(" ", "");
});
</script>

<style scoped></style>
